<template>
  <h2>计算属性和监视</h2>
  <fieldset>
    <legend>姓名操作</legend>
    姓名:<input
      placeholder="请输入名字"
      type="text"
      v-model="user.firstName"
    /><br />
    姓氏:<input
      placeholder="请输入姓氏"
      type="text"
      v-model="user.lastName"
    /><br />
    姓名:<input placeholder="请输入名字" type="text" /><br />
  </fieldset>
  <fieldset>
    <legend>计算属性和监视的演示</legend>
    姓名:<input placeholder="请输入名字" type="text" v-model="fullName" /><br />
    姓名:<input
      placeholder="请输入名字"
      type="text"
      v-model="fullName2"
    /><br />
    姓名:<input
      placeholder="请输入名字"
      type="text"
      v-model="fullName3"
    /><br />
  </fieldset>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  watch,
  ref,
  watchEffect,
} from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const user = reactive({
      firstName: "动画",
      lastName: "片",
    });
    const fullName = computed(() => {
      return user.firstName + "__" + user.lastName;
    });
    const fullName2 = computed({
      get() {
        return user.firstName + "__" + user.lastName;
      },
      set(newVal) {
        // console.log(newVal);
        const names = newVal.split("__");
        user.firstName = names[0];
        user.lastName = names[1];
      },
    });
    const fullName3 = ref("");
    watch(user,({firstName,lastName})=>{
      fullName3.value = firstName+'**'+lastName
    },{immediate:true,deep:true})
    /* watchEffect(()=>{
      fullName3.value = user.firstName+'**'+user.lastName
    }) */
    watchEffect(()=>{
      const names = fullName3.value.split('**')
      user.firstName = names[0]
      user.lastName = names[1]
    })
    watch([()=>user.firstName,()=>user.lastName,fullName3],()=>{
      console.log('====');
    })
    console.log(fullName);
    return {
      user,
      fullName,
      fullName2,
      fullName3,
    };
  },
});
</script>

<style lang="less" scoped>
</style>
